<template>
  <view class="question-container">
    <div class="header-wrap">
      <!-- 导航栏 -->
      <hi-navbar
        fixed
        back
        transparent="show"
        :backgroundColor="[237, 240, 243]"
        title="测试结果"
      >
      </hi-navbar>

      <div class="score-wrap">
        <div>
          <div class="u-m-b-12">
            <text class="score-wrap__score">{{ paperResult.score }}分</text>
            <text class="u-font-sm u-content-color"
              >共{{ paperResult.resultList.length }}道题</text
            >
          </div>
          <div class="u-font-sm u-tips-color">错题已保存至错题集中!</div>
        </div>
        <div class="u-flex u-row-between button-wrap">
          <button @click="onSetClickBoard">
            <u-icon name="github-circle-fill"></u-icon>
          </button>
          <button class="share-button" open-type="share">
            <u-icon name="share"></u-icon>
          </button>
        </div>
      </div>
    </div>

    <!-- 内容 -->
    <scroll-view
      scroll-y
      id="list-wrap"
      :style="{ height: 'calc(100vh - ' + listTop + 'px)' }"
    >
      <!-- 试卷列表 -->
      <question-list
        :question-list="paperResult.resultList"
        :canSelect="false"
        isShowAnswer
        @collect="onCollect"
      ></question-list>
    </scroll-view>

    <u-toast ref="uToast" />
  </view>
</template>

<script>
import QuestionList from "_c/Question/QuestionList"

import { mapActions, mapGetters } from "vuex"

let paperId = null // 试卷id

export default {
  components: {
    QuestionList,
  },

  data() {
    return {
      title: "----",
      timing: 0,
      listTop: 100,
    }
  },

  async onLoad(option) {
    const schedule = await this.$u.getRect("#list-wrap")
    this.listTop = schedule.top
  },

  computed: {
    ...mapGetters("question", ["paperResult"]),
  },

  methods: {
    ...mapActions("question", ["onCollectQuestion"]),

    /* 收藏问题 */
    onCollect(questionIndex) {
      this.onCollectQuestion({ questionIndex, paperId })
    },

    onSetClickBoard() {
      let self = this
      uni.setClipboardData({
        data: "https://gitee.com/github-31064550/uni_app-question.git",
        success: function () {
          self.$refs.uToast.show({
            title: "已复制代码Gitee开源地址啦, 给个Star呗",
            type: "success",
            position: "bottom",
          })
        },
      })
    },
  },

  onShareAppMessage: function (res) {
    return {
      title: "瞧一瞧看一看咯",
      path: "/pages/home/index",
    }
  },
}
</script>

<style lang="scss" scope>
.score-wrap {
  display: flex;

  padding: 24rpx 32rpx;

  align-items: center;
  justify-content: space-between;
  &__score {
    margin-right: 12rpx;

    font-family: "score";
    font-size: 60rpx;
  }
}
.button-wrap {
  button {
    margin-left: 12rpx;
    border: none;
    border-radius: 50%;

    background: #ecf0f3;

    box-shadow: 5px 5px 10px #cfcfd2, -5px -5px 10px #ffffff;
    &::after {
      border: none;
    }
  }
}
</style>
